<template>
  <PageWrapper title="基础详情页" contentBackground>
    <Description title="退款申请" :bordered="false" :column="3" :data="refundData" :schema="refundSchema" />
    <Divider />
    <Description title="用户信息" :bordered="false" :column="3" :data="personData" :schema="personSchema" />
    <Divider />

    <BasicTable @register="registerRefundTable" />
    <Divider />
    <BasicTable @register="registerTimeTable" />
  </PageWrapper>
</template>
<script lang="ts" setup>
import { Description } from '@/components/Description'
import { BasicTable, useTable } from '@/components/Table'
import { PageWrapper } from '@/components/Page'
import { Divider } from 'ant-design-vue'

import {
  refundSchema,
  refundData,
  personSchema,
  personData,
  refundTableSchema,
  refundTimeTableSchema,
  refundTableData,
  refundTimeTableData
} from './data'
const [registerRefundTable] = useTable({
  title: '退货商品',
  dataSource: refundTableData,
  columns: refundTableSchema,
  pagination: false,
  showIndexColumn: false,
  scroll: { y: 300 },
  showSummary: true,
  summaryFunc: handleSummary
})

const [registerTimeTable] = useTable({
  title: '退货进度',
  columns: refundTimeTableSchema,
  pagination: false,
  dataSource: refundTimeTableData,
  showIndexColumn: false,
  scroll: { y: 300 }
})

function handleSummary(tableData: any[]) {
  let totalT5 = 0
  let totalT6 = 0
  tableData.forEach((item) => {
    totalT5 += item.t5
    totalT6 += item.t6
  })
  return [
    {
      t1: '总计',
      t5: totalT5,
      t6: totalT6
    }
  ]
}
</script>
<style lang="less" scoped>
.desc-wrap {
  padding: 16px;
  background-color: @component-background;
}
</style>
